<template>
  <v-container>
    <v-text-field v-model="search" label="按名称搜索字典"></v-text-field>
    <v-divider dark></v-divider>
    <v-btn class="mr-4" @click="addTopDict">新增顶级字典</v-btn>
    <v-row>
      <v-col>
        <v-treeview
          v-model="selection"
          
          :items="items"
          open-all
          return-object
          :search="search"
          @input="changeTree"
          :selection-type="selectionType"
        >
          <template v-slot:append="{ item }">
            <v-tooltip top>
              <template v-slot:activator="{ on }">
                <v-btn class="mx-2" fab x-small v-on="on" @click="addChild(item)" color="primary">
                  <v-icon dark>mdi-plus</v-icon>
                </v-btn>
              </template>
              <span>新增下级</span>
            </v-tooltip>
           
            <v-tooltip top>
              <template v-slot:activator="{ on }">
                <v-btn class="mx-2" fab x-small v-on="on" @click="updateDict(item)" color="primary">
                  <v-icon dark>mdi-pencil</v-icon>
                </v-btn>
              </template>
              <span>编辑字典</span>
            </v-tooltip>
             <v-tooltip top>
              <template v-slot:activator="{ on }">
                <v-btn class="mx-2" fab x-small v-on="on" @click="delDict(item)" color="error">
                  <v-icon dark>mdi-minus</v-icon>
                </v-btn>
              </template>
              <span>删除字典</span>
            </v-tooltip>
          </template>
        </v-treeview>
      </v-col>
      <v-divider vertical></v-divider>
      <v-col class="pa-6" cols="6">
        <!-- <template v-if="!selection.length&&!formFlag">No nodes selected.</template> -->
        <template v-if="selection.length">
          <div>
            <!-- {{ selection[selection.length-1].name }} -->
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field :value="selection[selection.length-1].topName" label="父级字典名称" required></v-text-field>
              <v-text-field label="字典名称" :value="selection[selection.length-1].name" required></v-text-field>
            </v-form>
          </div>
        </template>
        <template v-if="formFlag">
          <form ref="form">
            <v-text-field v-model="dictForm.topName" label="父级字典名称" required >
                  <v-btn slot="append"  @click="updateParentFlag=true" v-show="btnFlag">
                    修改父级
                  </v-btn>

            </v-text-field>
           
            <v-autocomplete v-model="dictForm.updatParent" :items="dictItems" return-object label="现有字典获取父级，可输入关键字搜索"  item-text="text"
          item-value="value" v-show="updateParentFlag">
          <v-btn slot="append"  @click="updateParentFlag=false">
                    取消
                  </v-btn>
          </v-autocomplete >
            <v-text-field v-model="dictForm.name" label="字典名称" required></v-text-field>
            <v-text-field v-model="dictForm.rank" label="序号" required></v-text-field>
            <v-text-field v-model="dictForm.attributes" label="字典属性" required></v-text-field>

            <v-btn class="mr-4" @click="save">保存</v-btn>
            <v-btn @click="reset">取消</v-btn>
          </form>
        </template>
      </v-col>
    </v-row>
    <v-snackbar v-model="snackbar" top color="success">
      {{ addSuccess }}
      <v-btn text @click="snackbar = false">Close</v-btn>
    </v-snackbar>
  </v-container>
</template>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    btnFlag:false,
    updateParentFlag:false,
    snackbar: false,
    addSuccess: "操作成功",
    formFlag: false,
    valid: true,
    search: "",
    dictForm: {
      // name:this.selection[this.selection.length-1].name,
      // id:this.selection[this.selection.length-1].id,
      // pid:this.selection[this.selection.length-1].pid,
      // topName:this.selection[this.selection.length-1].topName
    },
    selectionType: "independent",
    selection: [],
    items: [],
    dictItems:[]
  }),

  methods: {
    getTree() {
      this.axios
        .get("/dict/tree")
        .then(response => {
          this.items = response.data.data;
          
        })
        .catch(respnose => {});
    },

    getDictList(level){

      this.axios
      .get('/dict/list/'+level)
      .then(response=>{
          this.dictItems = response.data.data
      })
      .catch(response=>{

      })
    },
    dictAdd(item) {
      console.log(item);
    },
    addTopDict() {
      this.formFlag = true;
      this.dictForm = {};
      this.selection = [];
    },
    changeTree(data) {
      this.formFlag = false;
    },
    addChild(item) {
      console.log(this.dictItems)
      this.formFlag = true;
      this.dictForm = {};
      this.dictForm.topName = item.name;
      this.dictForm.parentName = item.name;
      this.dictForm.parentId = item.id;
      this.dictForm.level = item.level + 1;
      this.dictForm.fullName = item.fullName + "/";
      
    },
    updateDict(item) {
      this.btnFlag=true
      this.formFlag = true;
      this.dictForm = {};
      this.dictForm = item;
      this.getDictList(item.level)
      console.log(this.dictForm)
    },
    delDict(item){
      confirm('确定要删除字典吗？') && this.deleteItem(item)
    },
    deleteItem(item){
        this.axios
                  .delete('/dict/'+item.id)
                  .then(response=>{
                      this.snackbar = true;
                      this.getTree()
                  })
                  .catch(response=>{

                  })
    },
    save() {
      
      if(this.updateParentFlag===true&&this.dictForm.updatParent!==undefined){
        this.dictForm.parentId=this.dictForm.updatParent.value
        this.dictForm.parentName = this.dictForm.updatParent.text
        this.dictForm.topName=this.dictForm.updatParent.text
        this.dictForm.level = this.dictForm.updatParent.level+1
        this.dictForm.fullName = this.dictForm.updatParent.fullName+"/"
        
      }
      
      this.dictForm.fullName = this.dictForm.fullName + this.dictForm.name;
      this.dictForm.children='';
      console.log(this.dictForm);
      this.axios
        .post("/dict", this.$qs.stringify(this.dictForm))
        .then(response => {
          this.snackbar = true;
          this.reset()
          this.getTree();
          this.updateParentFlag=false
          this.btnFlag=false

        })
        .catch(respnose => {});
    },
    reset(){
      this.$refs.form.reset()
    }
  },
  created() {
    this.getTree();
    
    
  },
  watch: {}
};
</script>